<template>
  <div class="Account">
    <div class="info">
      <div class="icon">
        <img src="~assets/img/party.png" alt="">
      </div>
      <div class="word">
        <div class="tit">我的账户</div>
        <div class="desc">暂无简介</div>
      </div>
    </div>
    <div class="content">
      <div class="tabs">
        <div v-for="item in tabs" :key="item.key" class="tab" :class="{'active': item.key === active}" @click="tabSwitch(item)">
          <div class="name">{{item.value}}</div>
          
        </div>
        <div class="swipe" :style="swipeStyle"></div>
      </div>
      <div class="tab-con">

      </div>
    </div>
  </div>
</template>

<script>
import { accountTabs } from '@/consts/codesMap'
export default {
  data() {
	  return {
      tabs: accountTabs,
      active: 0,
	  }
  },
  computed: {
    swipeStyle() {
      let pos = this.active * 203 + 33
      return {
        left: pos * 100 / 1920 + 'vw'
      }
    }
  },
  methods: {
    tabSwitch(item) {
      this.active = item.key
    }
  },
}
</script>

<style lang="stylus">
.Account {
  height: 60vh;
  margin: getPx(80) 0 0 0;
  .info {
    height: getPx(250);
    margin-bottom: getPx(22);
    flexMiddle(flex-start);
    .icon {
      width: getPx(250);
      height: getPx(250);
      margin-right: getPx(40);  
      img {
        width: 100%;
        height: 100%;
      }
    }
    .word {
      height: getPx(250);
      .tit {
        font-size: $title-font-size;
        color: $black;  
      }
      .desc {
        font-size: $subTitle-font-size;
        color: $grey;  
        margin-top: getPx(18);
      }  
    }  
  }
  .content {
    .tabs {
      width: getPx(1076);
      height: getPx(92);
      position: relative;
      background-color: #fbf0ee;
      box-shadow: 0 getPx(8) getPx(8) 0 rgba(0, 0, 0, 0.08);
    }
    .tab {
      cursor: pointer;
      width: getPx(105);
      line-height: getPx(92);
      text-align: center;
      height: 100%;
      font-size: $sec-title-font-size;
      color: $swipe-color;
      float: left;
      margin: 0 getPx(64) 0 getPx(33);
      &.active {
        color: $black;
      }
      
    }
    .swipe {
      position: absolute;
      width: getPx(105);
      height: getPx(5);
      background-color: #e03224;
      bottom: 0;
      left: getPx(33);
      transition: all $trans-time;
    }
    .tab-con {
      margin: getPx(18) 0 0 0;
      width: getPx(1076);
      height: getPx(424);
      background-color: $white;
      box-shadow: 0 getPx(8) getPx(8) 0 rgba(0, 0, 0, 0.1);
    }
  }
}
</style>